import Head from '@/components/Head.vue';
<template>
    <div class="all">
        <div class="markcard">
            <div class="head">
                <div class="type">
                    <p>读书笔记</p>
                </div>

            </div>
            <div class="body">
                今天读完了《人生海海》这本书，作者麦家 的文字真是让人沉醉。每一个字都像是精心 雕琢过的宝石，闪烁着独特的光芒。这本书 值得反复品味，每次都能有新的感悟。
            </div>
            <div class="foot">
                <div class="left">
                    <el-icon>
                        <Management />
                    </el-icon><i></i>
                    <p>读书笔记</p>
                </div>
                <div class="right">
                    <span>2023-01-01</span>
                </div>
                
            </div>
        </div>

        <div class="markcard">
            <div class="head">
                <div class="type">
                    <p>读书笔记</p>
                </div>

            </div>
            <div class="body">
                今天读完了《人生海海》这本书，作者麦家 的文字真是让人沉醉。每一个字都像是精心 雕琢过的宝石，闪烁着独特的光芒。这本书 值得反复品味，每次都能有新的感悟。
            </div>
            <div class="foot">
                <div class="left">
                    <el-icon>
                        <Management />
                    </el-icon><i></i>
                    <p>读书笔记</p>
                </div>
                <div class="right">
                    <span>2023-01-01</span>
                </div>
                
            </div>
        </div>

        <div class="markcard">
            <div class="head">
                <div class="type">
                    <p>读书笔记</p>
                </div>

            </div>
            <div class="body">
                今天读完了《人生海海》这本书，作者麦家 的文字真是让人沉醉。每一个字都像是精心 雕琢过的宝石，闪烁着独特的光芒。这本书 值得反复品味，每次都能有新的感悟。
            </div>
            <div class="foot">
                <div class="left">
                    <el-icon>
                        <Management />
                    </el-icon><i></i>
                    <p>读书笔记</p>
                </div>
                <div class="right">
                    <span>2023-01-01</span>
                </div>
                
            </div>
        </div>

        <div class="box2">

        </div>
    </div>
</template>

<script setup>

</script>

<style lang="less" scoped>
.all {
   background-color:#fbf9f9;
   height: calc(100vh - 32px); 
    padding: 16px;
    color: #7B68EE;
    overflow: auto;
    .markcard {
        padding: 1rem;
        background: #FFFFFF rgba(0, 0, 0, 0.001);
        box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
        border-radius: 12px 12px 12px 12px;
        background-color: #fff;
        margin-bottom: 1rem;

        .head {
            margin-bottom: 12px;

            .type {
                width: 72px;
                height: 28px;
                background: rgba(196, 181, 253, 0.2);
                border-radius: 9999px 9999px 9999px 9999px;
                display: flex;
                justify-content: center;
                align-items: center;

                p {
                    font-family: Roboto, Roboto;
                    font-weight: 500;
                    font-size: 14px;
                    color: #8B5CF6;
                    line-height: 20px;
                }
            }


        }

        .body {
            margin-bottom: 12px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
            overflow: hidden;
            text-overflow: ellipsis;
            font-family: Roboto, Roboto;
            font-weight: 400;
            font-size: 16px;
            color: #111827;
            line-height: 26px;
        }

        .foot {
            display: flex;
            align-items: center;
            justify-content: space-between; // 新增关键属性
            margin-top: 12px;
            padding: 8px 0;
            border-top: 1px solid #f3f4f6; // 添加分割线

            .left {
                display: flex;
                .el-icon {
                    color: #6B7280;
                    font-size: 18px;
                    margin-right: 5px;
                }
                p{
                    font-family: Roboto, Roboto;
                    font-weight: 400;
                    font-size: 14px;
                    color: #6B7280;

                }
            }
            
            .right {
                flex-shrink: 0;

                span {
                    color: #9ca3af;
                    font-size: 12px;
                }
            }
        }
    }
}
</style>